import { useEffect, useReducer, useState } from "react"
import { loginApi, userListApi } from "../../api"
import type { UserListItem, UserListParams } from "../../api/type"
import './ListStyle.css'
import SearchCreate from "./components/searchcreate/SearchCreate"
import type { Action, ListProps, State } from "./ListType"
import TableList from "./components/tablelist/TableList"
import PopModel from "./components/popmodel/PopModel"
import context from "./context/Context"

function ListView (props: Readonly<ListProps>) {

  // #region 变量声明
  const [ userList, setUserList ] = useState<UserListItem[]>([]) // 用户列表
  const [ showPop, setShowPop ] = useState(false) // 显示弹窗
  const [ state, dispatch ] = useReducer<State, Action>((prev, action) => {
    // console.log(prev, action)
    const next = { ...prev }
    if (next[action.type]) {
      (next[action.type] as typeof action.value) = action.value
    }
    return next
  }, {
    searchForm: {
      username: '',
      age: undefined,
      sex: undefined,
      email: undefined,
      pagesize: 5,
      page: 1,
    },
    edit: {
      age: undefined,
      email: undefined,
      id: '',
      no: 0,
      password: undefined,
      sex: undefined,
      username: undefined,
    }
  })
  const [ popType, setPopType ] = useState(false) // 是否为编辑类型
  // #endregion

  // #region 函数
  // 获取用户列表信息
  async function getUserList (params: UserListParams) {
    try {
      const res = await userListApi(params)
      // console.log(res.data.values.list)
      if (res.data.code === 0) {
        setUserList(res.data.values.list)
      }
    } catch (error) {
      console.log(error)
    }
  }
  // 改变主题
  function changeTheme () {
    // console.log(props.theme)
    props.changeTheme(props.theme ? '' : 'dark')
  }
  // 设置搜索表单数据
  // function setSearchFormHandler (newSearchForm: UserListParams) {
  //   setSearchForm(newSearchForm)
  // }
  // 显示弹窗
  function changeShowPop (bool: boolean) {
    setShowPop(bool)
  }
  // 改变当前编辑用户
  function changePopType (newPopType: boolean) {
    setPopType(newPopType)
  }
  // 清空表单
  function resetEdit () {
    dispatch({
      type: 'edit',
      value: {
        age: undefined,
        email: undefined,
        id: '',
        no: 0,
        password: undefined,
        sex: undefined,
        username: undefined,
      }
    })
  }
  // #endregion

  // #region Hoocs
  // 挂载后, 或者在搜索数据更新后, 调一次获取数据
  useEffect(() => {
    getUserList(state.searchForm)
  }, [state])
  // #endregion

  return (
    <div className="list_wrap">
      <div className="login_button" onClick={ onLogin }>点击自动登录</div>
      <div className="change_theme" onClick={ changeTheme }>点击改变主题: { props.theme ? '暗色' : '白昼' }</div>
      <context.Provider value={{ state, dispatch }}>
        <SearchCreate show={ () => {
          changeShowPop(true)
          changePopType(false)
          resetEdit()
        } } />
        <TableList
          list={ userList }
          show={ () => {
            changeShowPop(true)
            changePopType(true)
          } }
        />
        { showPop && <PopModel popType={ popType } close={ () => changeShowPop(false) } /> }
      </context.Provider>
    </div>
  )
}

// 自动登录
function onLogin () {
  loginApi()
}

export default ListView
